import { IPanelRawItem } from '@ibiz/model-core';
import { defineComponent, PropType, ref } from 'vue';
import { useNamespace } from '@ibiz-template/vue3-util';
import { GridToolbarController } from './grid-toolbar.controller';
import './grid-toolbar.scss';

export const GridToolbar = defineComponent({
  name: 'IBizGridToolbar',
  props: {
    modelData: {
      type: Object as PropType<IPanelRawItem>,
      required: true,
    },
    controller: {
      type: Object as PropType<GridToolbarController>,
      required: true,
    },
  },
  setup(props) {
    const c = props.controller;
    const ns = useNamespace('grid-toolbar');

    const showPopover = ref(false);

    /**
     * 处理导出
     *
     * @param {MouseEvent} e
     * @param {('maxRowCount' | 'activatedPage')} type 所有页 | 当前页
     */
    const handleExport = async (
      event: MouseEvent,
      type: 'maxRowCount' | 'activatedPage',
    ) => {
      showPopover.value = false;
      c.export(event, type);
    };

    /**
     * 绘制列列表
     *
     * @return {*}
     */
    const renderColumnList = (): JSX.Element[] | undefined => {
      return c.grid?.state.columnStates.map(state => {
        const columnC = c.grid && c.grid.columns[state.key];
        return (
          <div class={ns.em('column-list', 'item')}>
            <div class={ns.em('column-list', 'item-caption')}>
              {(columnC && columnC.model.caption) || state.caption}
            </div>
            <el-switch
              size='small'
              class={ns.em('column-list', 'item-state')}
              model-value={!state.hidden}
              onChange={() => c.setColumnVisible(state)}
            />
          </div>
        );
      });
    };

    return {
      c,
      ns,
      showPopover,
      handleExport,
      renderColumnList,
    };
  },
  render() {
    return (
      <div class={[this.ns.b(), ...this.controller.containerClass]}>
        <el-button
          circle
          title='刷新'
          class={this.ns.e('item')}
          onClick={() => this.c.refresh()}
        >
          <ion-icon name='sync-outline'></ion-icon>
        </el-button>
        <el-popover
          width='auto'
          trigger='click'
          placement='bottom'
          popper-class={this.ns.e('popover')}
          v-model:visible={this.showPopover}
        >
          {{
            reference: () => (
              <el-button circle title='导出' class={this.ns.e('item')}>
                <ion-icon name='print-outline'></ion-icon>
              </el-button>
            ),
            default: () => {
              return (
                <div class={this.ns.e('export-list')}>
                  <el-button
                    type='primary'
                    class={this.ns.em('export-list', 'item')}
                    onClick={(e: MouseEvent) =>
                      this.handleExport(e, 'activatedPage')
                    }
                  >
                    导出当前页面
                  </el-button>
                  <el-button
                    type='primary'
                    class={this.ns.em('export-list', 'item')}
                    onClick={(e: MouseEvent) =>
                      this.handleExport(e, 'maxRowCount')
                    }
                  >
                    导出全部页面
                  </el-button>
                </div>
              );
            },
          }}
        </el-popover>
        <el-popover
          width='auto'
          trigger='click'
          placement='bottom'
          popper-class={this.ns.e('popover')}
        >
          {{
            reference: () => (
              <el-button circle title='表格列配置' class={this.ns.e('item')}>
                <ion-icon name='options'></ion-icon>
              </el-button>
            ),
            default: () => {
              return (
                <div class={this.ns.e('column-list')}>
                  <div class={this.ns.em('column-list', 'header')}>
                    <div class={this.ns.em('column-list', 'header-item')}>
                      表头名称
                    </div>
                    <div class={this.ns.em('column-list', 'header-item')}>
                      展示
                    </div>
                    {this.c.showReset && (
                      <el-button
                        circle
                        class={this.ns.em('column-list', 'reset-column')}
                        title='重置列'
                        onClick={() => this.c.resetColumn()}
                      >
                        <svg
                          class='icon'
                          viewBox='0 0 1134 1024'
                          version='1.1'
                          xmlns='http://www.w3.org/2000/svg'
                          p-id='8264'
                          fill='currentColor'
                          width='1em'
                          height='1em'
                        >
                          <path
                            d='M590.776886 159.371752c-192.626174 0-351.254811 147.296124-368.240309 339.922299H109.21145l141.629868 169.947879 141.643138-169.947879h-113.311856c16.998769-158.628637 147.309394-283.273005 311.591017-283.273006C760.724766 216.021045 902.354633 357.650913 902.354633 527.612062c0 169.974419-141.643138 311.591017-311.591016 311.591017h-28.331282v56.649293h28.331282c203.945417 0 368.24031-164.294893 368.24031-368.24031 0.01327-203.945417-164.281623-368.24031-368.227041-368.24031z'
                            p-id='8265'
                          ></path>
                        </svg>
                      </el-button>
                    )}
                  </div>
                  <div class={this.ns.em('column-list', 'content')}>
                    {this.renderColumnList()}
                  </div>
                </div>
              );
            },
          }}
        </el-popover>
        {this.controller.searchForm && (
          <el-button
            circle
            title='隐藏/显示搜索组件'
            class={this.ns.e('item')}
            onClick={() => this.c.toggleFilter()}
          >
            <ion-icon name='search-outline'></ion-icon>
          </el-button>
        )}
      </div>
    );
  },
});
